<template>
  <view class="wallet">
    <text class="balance">余额：{{ balance }}</text>
    <view class="operation">
      <view class="recharge" @click="handleRecharge">充值</view>
      <view class="withdraw" @click="handleWithdraw">提现</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      balance: 0 // 初始余额为0
    };
  },
  methods: {
    handleRecharge() {
      // 处理充值逻辑
      // 调用支付相关的功能，如调起支付宝或微信支付等
      // 更新余额
      this.balance += 100;
    },
    handleWithdraw() {
      // 处理提现逻辑
      // 调用银行或第三方支付接口实现提现操作
      // 更新余额
      this.balance -= 50;
    }
  }
};
</script>

<style>
.wallet {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.balance {
  font-size: 24px;
  margin-bottom: 20px;
}

.operation {
  display: flex;
}

.recharge,
.withdraw {
  flex: 1;
  padding: 10px;
  text-align: center;
}

.recharge {
  background-color: #00a0e9;
  color: #fff;
}

.withdraw {
  background-color: #f44336;
  color: #fff;
}
</style>